<!-- 个人中心 -->
<template>
  <div class="profiles-page">
    <el-row type="flex" justify="center">
      <el-col class="middle-content">
        <div style="height:104px"></div>
        <!-- 面包屑导航 -->
        <el-row class="breadcrumb-nav" type="flex" align="middle">
          <div class="current-place">当前位置：</div>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>个人中心</el-breadcrumb-item>
            <el-breadcrumb-item>{{leftNavBreadcrumb}}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-row>
        <!-- 内容区 -->
        <el-row class="profiles-content" :gutter="50">
          <el-col class="profiles-content-left" :span="5">
            <div class="profiles-content-left-nav">
              <div
                class="item"
                :class="index==navCurrentIndex?'is-active':''"
                @click="leftNavChange(index,item)"
                v-for="(item,index) in leftNav"
                :key="item.val"
              >
                {{item.lab}}
                <div class="line" v-if="index==navCurrentIndex"></div>
              </div>
            </div>
          </el-col>
          <el-col class="profiles-content-right" :span="19">
            <keep-alive>
              <component :is="currentView" :myNavItemCom="myNavItemCom"></component>
            </keep-alive>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
let leftNav = [
  {lab: '我的信息', val: 0, name: 'MyInfo'},
  {lab: '我的交易', val: 1, name: 'MyTrade'},
  {lab: '我的收藏', val: 2, name: 'MyStore'},
  {lab: '消息中心', val: 3, name: 'MyNotice'},
  {lab: '修改密码', val: 4, name: 'MyPassword'}
]

export default {
  name: 'Profiles',
  components: {
    MyInfo: () => import('./myInfo'),
    MyTrade: () => import('./myTrade'),
    MyStore: () => import('./myStore'),
    MyNotice: () => import('./myNotice'),
    MyPassword: () => import('./myPassword')
  },
  data() {
    return {
      leftNav,
      navCurrentIndex: 0,
      leftNavBreadcrumb: '我的交易',
      currentPage: 5,
      isShowMod: 0,
      currentView: 'MyInfo',
      myNavItemCom: null
    }
  },
  computed: {},
  methods: {
    getList() {},
    leftNavChange(index, item) {
      this.navCurrentIndex = index
      this.leftNavBreadcrumb = this.leftNav[index].lab
      this.currentView = this.leftNav[index].name
    }
  },
  created() {
    if (Object.keys(this.$route.query).length !== 0) {
      this.myNavItemCom = this.$route.query
      this.leftNavChange(+this.$route.query.navIndex)
    }
  },
  mounted() {
  }
  
}
</script>

<style lang='less' scoped>
// 内容区
.profiles-content {
  margin-bottom: 60px;
  &-left {
    &-nav {
      color: #333;
      background-color: #efefef;
      .item {
        line-height: 50px;
        text-align: center;
        position: relative;
      }
      .item:hover {
        background-color: #fff;
      }
      .is-active {
        background-color: #fff;
      }
      .line {
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 50px;
        background-color: #0e2e78;
      }
    }
  }
  &-right {
    min-height: 400px;
    padding: 25px;
    background-color: #fff;
  }
}
// 分页
.el-pagination {
  margin-top: 32px;
}

// 面包屑导航
.breadcrumb-nav {
  font-size: 14px;
  color: #666666;
  line-height: 24px;
  padding: 24px 0 32px 0;
}

.profiles-page {
  background-color: #f6f6f6;
}
</style>